<template>
  <div class="search">
    <Header :isLeft="true" title="搜索" />
    <div class="search_header">
      <form class="search_wrap">
        <i class="fa fa-search"></i>
        <input type="text" v-model="key_word" placeholder="输入商家，商品信息" />
        <button @click.prevent="searchHandle">搜索</button>
      </form>
    </div>
    <!-- shop -->
    <div class="shop" v-if="result">
      <div class="empty_wraper" v-if="empty">
        <!-- <img src="" alt /> -->
        <div class="empty_text">
          <h4>附近没有搜索结果</h4>
          <span>换个关键词试试吧！</span>
        </div>
      </div>
      <div v-else>
        <SearchIndex :data="result.restaurants" @click="shopItemClick" />
        <SearchIndex :data="result.words" @click="shopItemClick" />
      </div>
    </div>
    <!-- 商家信息 -->
    <div v-if="showShop">商家信息</div>
  </div>
</template>

<script>
import Header from "./../components/headers.vue";
import SearchIndex from "./../components/searchIndex.vue";
export default {
  name: "search",
  components: {
    Header,
    SearchIndex,
  },
  data() {
    return {
      key_word: "",
      result: null,
      empty: false,
      showShop: false,
    };
  },
  watch: {
    key_word() {
      this.empty = false;
      this.showShop = false;
      this.keyWordChange();
    },
  },
  methods: {
    shopItemClick() {
      this.showShop = true;
    },
    searchHandle() {
      if (!this.key_word) {
        return;
      }
      // 搜索
      if (
        this.result &&
        (this.result.restaurants.length > 0 || this.result.words.length)
      ) {
        // console.log("有内容！");
        this.sshopItemClick();
      } else {
        this.empty = true;
      }
    },
    keyWordChange() {
      //   console.log(this.key_word);
      this.$axios(`/api/profile/typeahead/${this.key_word}`)
        .then((res) => {
          console.log(res);
          this.result = res.data;
          console.log(this.result);
        })
        .catch((err) => {
          //   console.log(err);
          this.result = null;
        });
    },
  },
};
</script>

<style scoped>
.shop {
  width: 100%;
  height: calc(100% -95px);
  overflow: hidden;
}
.empty_wraper {
  font-size: 12px;
  color: #fff;
  width: 300px;
  height: 100px;
  background-color: skyblue;
  text-align: center;
  line-height: 100px;
  border-radius: 30px;
  border: 1px dotted yellow;
  box-shadow: 2px 2px 20px rgb(179, 29, 29);
}
</style>